<!DOCTYPE html>
<html lang="zh-CN" ng-app="ionicApp">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List</title>
    <style>
        body {
            cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="css/ionic.css">
    <script type="text/javascript" src="js/ionic.bundle.min.js"></script>
    <script>
        angular.module('ionicApp', ['ionic'])
                .controller('MyCtrl', function ($scope) {
                    $scope.data = {
                        showDelete: false
                    };

                    $scope.edit = function (item) {
                        alert('编辑 Item: ' + item.id);
                    };
                    $scope.share = function (item) {
                        alert('分享 Item: ' + item.id);
                    };

                    $scope.moveItem = function (item, fromIndex, toIndex) {
                        alert('移动 Item: ' + item.id + '，从列表第' + fromIndex + '位到第' + toIndex + '位');
                        $scope.items.splice(fromIndex, 1);
                        $scope.items.splice(toIndex, 0, item);
                    };

                    $scope.onItemDelete = function (item) {
                        alert('删除 Item: ' + item.id);
                        $scope.items.splice($scope.items.indexOf(item), 1);
                    };

                    $scope.items = [
                        {id: 0},
                        {id: 1},
                        {id: 2},
                        {id: 3},
                        {id: 4},
                        {id: 5},
                        {id: 6},
                        {id: 7},
                        {id: 8},
                        {id: 9},
                        {id: 10},
                        {id: 11},
                        {id: 12},
                        {id: 13},
                        {id: 14},
                        {id: 15},
                        {id: 16},
                        {id: 17},
                        {id: 18},
                        {id: 19},
                        {id: 20},
                        {id: 21},
                        {id: 22},
                        {id: 23},
                        {id: 24},
                        {id: 25},
                        {id: 26},
                        {id: 27},
                        {id: 28},
                        {id: 29},
                        {id: 30},
                        {id: 31},
                        {id: 32},
                        {id: 33},
                        {id: 34},
                        {id: 35},
                        {id: 36},
                        {id: 37},
                        {id: 38},
                        {id: 39},
                        {id: 40},
                        {id: 41},
                        {id: 42},
                        {id: 43},
                        {id: 44},
                        {id: 45},
                        {id: 46},
                        {id: 47},
                        {id: 48},
                        {id: 49},
                        {id: 50}
                    ];

                });
    </script>
</head>

<body ng-controller="MyCtrl">

<ion-header-bar class="bar-positive">
    <div class="buttons">
        <button class="button button-icon icon ion-ios-minus-outline"
                ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
    </div>
    <h1 class="title">标题</h1>
    <div class="buttons">
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
            排序
        </button>
    </div>
</ion-header-bar>

<ion-content>

    <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists -->

    <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

        <ion-item ng-repeat="item in items"
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
            Item {{ item.id }} 这是列表啊这是列表啊这是列表啊这是列表啊这是列表啊这是列表啊这是列表啊这是列表啊这是列表啊这是列表啊
            <ion-delete-button class="ion-minus-circled"
                               ng-click="onItemDelete(item)">
            </ion-delete-button>
            <ion-option-button class="button-assertive"
                               ng-click="edit(item)">
                <i class="ion-edit"></i>&nbsp;编辑
            </ion-option-button>
            <ion-option-button class="button-calm"
                               ng-click="share(item)">
                <i class="ion-android-share-alt"></i>&nbsp;分享
            </ion-option-button>
            <ion-reorder-button class="ion-drag"
                                on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>

    </ion-list>

</ion-content>

</body>
</html>
